/*
* @Functions
* @description Strip units from $number(去掉数值后的单位)
* @param $number Include units number(含单位字符的数值)
* @return pure number(纯数字)
*/
@function __strip-units($number) {
  @if type-of($number) == "number" {
    @return $number/($number * 0 +1);
  }
  @warn 'Exception in method __stip-unit : Not a number value: #{$number}';
  @return $number;
}
/*
  * @Functions
  * @description Convert the ratio to percentage between real length and max length (得到实际长度和最大长度的百分比)
  * @param $tinyLen 设计图上的实际尺寸
  * @param $maxLen  设计图上的容器最大尺寸
  * @return percent(百分比)
  */
@function px2percent($realLen, $maxLen) {
  $realLen: __strip-units($realLen);
  $maxLen: __strip-units($maxLen);
  @return #{($realLen / $maxLen) * 100+"%"};
}

.color-table-wrap-bg {
  width: 100%;
  padding-top: px2percent(1254, 1920);
  background: url(../../imgs/colortable/kecheng.gif) no-repeat;
  background-size: 100% auto;
  position: relative;
  .content {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 4%;
  }
}

$firstColorItemWidth: 121;
$colorItemWidth: 108;
$colorTableWrapWidth: 1282;
.color-table {
  width: px2percent($colorTableWrapWidth, 1920);
  padding-top: px2percent(866, 1920);
  background: url("../../imgs/colortable/color-table-bg.png");
  background-size: 100% 100%;
  position: relative;
  margin: 0 auto;
  .wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    .blackboard {
      position: absolute;
      right: 0;
      bottom: 50px;
      width: 368px;
      padding-top: 273px;
      background-color: #fff;
      border-radius: 4px;
      .text-wrap {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding: px2percent(10, 368) px2percent(20, 368);
        font-size: 13px;
        overflow: auto;
        .title {
          font-size: 15px;
          text-align: center;
          border-bottom: 1px solid #FFF;
          padding-bottom: 5px;
          margin-bottom: 10px;
        }
        .titem {
          margin-bottom: px2percent(7, 308);
          box-sizing: border-box;
          .icon {
            display: inline-block;
            padding: px2percent(5, 308);
            text-align: center;
            border-radius: 2px;
            margin-right: px2percent(10, 308);
            box-sizing: border-box;
          }
          .text {
            display: inline;
          }
        }
      }
    }
    .color-item {
      width: px2percent($colorItemWidth, $colorTableWrapWidth);
      margin-left: px2percent(-14, $colorTableWrapWidth);
      height: 100%;
      box-sizing: border-box;
      float: left;
      padding: 0;
    }
    .st-1 {
      width: px2percent($firstColorItemWidth, $colorTableWrapWidth);
      margin: 0;
    }
    :hover.st-1 {
      width: px2percent($firstColorItemWidth, $colorTableWrapWidth);
      padding-top: px2percent(866-35, $colorTableWrapWidth);
      background: url(../../imgs/colortable/1.png) no-repeat;
      background-size: 100% auto;
      // background-position-x:center
    }
    :hover.nd-2 {
      width: px2percent($colorItemWidth, $colorTableWrapWidth);
      background: url(../../imgs/colortable/2.png) no-repeat;
      background-size: 100% auto;
    }
    :hover.rd-3 {
      width: px2percent($colorItemWidth, $colorTableWrapWidth);
      background: url(../../imgs/colortable/3.png) no-repeat;
      background-size: 100% auto;
    }
    :hover.th-4 {
      width: px2percent($colorItemWidth, $colorTableWrapWidth);
      background: url(../../imgs/colortable/4.png) no-repeat;
      background-size: 100% auto;
    }
    :hover.th-5 {
      width: px2percent($colorItemWidth, $colorTableWrapWidth);
      background: url(../../imgs/colortable/5.png) no-repeat;
      background-size: 100% auto;
    }
    :hover.th-6 {
      width: px2percent($colorItemWidth, $colorTableWrapWidth);
      background: url(../../imgs/colortable/6.png) no-repeat;
      background-size: 100% auto;
    }
    :hover.th-7 {
      width: px2percent($colorItemWidth, $colorTableWrapWidth);
      background: url(../../imgs/colortable/7.png) no-repeat;
      background-size: 100% auto;
    }
    :hover.th-8 {
      width: px2percent($colorItemWidth, $colorTableWrapWidth);
      background: url(../../imgs/colortable/8.png) no-repeat;
      background-size: 100% auto;
    }
    :hover.th-9 {
      width: px2percent($colorItemWidth, $colorTableWrapWidth);
      background: url(../../imgs/colortable/9.png) no-repeat;
      background-size: 100% auto;
    }
    :hover.th-10 {
      width: px2percent($colorItemWidth, $colorTableWrapWidth);
      background: url(../../imgs/colortable/10.png) no-repeat;
      background-size: 100% auto;
    }
  }
}
.blackboard {
  position: absolute;
  right: 0;
  bottom: 50px;
  width: 308px;
  padding-top: 273px;
  background-color: #fff;
  border-radius: 4px;
  .text-wrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: px2percent(20, 308);
    font-size: 13px;
    overflow: auto;
    .title {
      font-size: 15px;
      text-align: center;
      border-bottom: 1px solid #000;
      padding-bottom: 5px;
      margin-bottom: 10px;
    }
    .titem {
      margin-bottom: px2percent(7, 308);
      box-sizing: border-box;
      .icon {
        display: inline-block;
        padding: px2percent(5, 308);
        text-align: center;
        border-radius: 2px;
        margin-right: px2percent(10, 308);
        box-sizing: border-box;
      }
      .text {
        display: inline;
      }
    }
  }
}
.color-item-1{
  background-color: #E96B13 !important;
  color:#FFF;
  .text-wrap .titem .icon{
    background-color: #FFF;
    color: #E96B13;
  }
}
.color-item-2{
  background-color: #F7C10A !important;
  color:#FFF;
  .text-wrap .titem .icon{
    background-color: #FFF;
    color: #F7C10A;
  }
}
.color-item-3{
  background-color: #EDE509 !important;
  color:#BBB;
  .text-wrap .titem .icon{
    background-color: #BBB;
    color: #EDE509;
  }
}
.color-item-4{
  background-color: #9FC826 !important;
  color:#FFF;
  .text-wrap .titem .icon{
    background-color: #FFF;
    color: #9FC826;
  }
}
.color-item-5{
  background-color: #116B66 !important;
  color:#FFF;
  .text-wrap .titem .icon{
    background-color: #FFF;
    color: #116B66;
  }
}
.color-item-6{
  background-color: #0E71C2 !important;
  color:#FFF;
  .text-wrap .titem .icon{
    background-color: #FFF;
    color: #0E71C2;
  }
}

.color-item-7{
  background-color: #173289 !important;
  color:#FFF;
  .text-wrap .titem .icon{
    background-color: #FFF;
    color: #173289;
  }
}
.color-item-8{
  background-color: #1E1E49 !important;
  color:#FFF;
  .text-wrap .titem .icon{
    background-color: #FFF;
    color: #1E1E49;
  }
}
.color-item-9{
  background-color: #321A42 !important;
  color:#FFF;
  .text-wrap .titem .icon{
    background-color: #FFF;
    color: #321A42;
  }
}

